<template>
  <div class="preface-box">
    <div class="preface-content">
      <div class="preface-left">
        <titles :title="props.info.text" />
        <span
          class="left-title hw-wrap-spase"
          :style="{
            fontSize: store.styleInfo.contentSize,
            fontFamily: store.styleInfo.textFamily,
            color: store.styleInfo.fontColor,
          }"
          >{{ props.info.remarks }}</span
        >
        <div
          @click="clickPath"
          :style="{
            fontFamily: 'SourceHanSerifCN-Bold',
            fontSize: '14px',
            color: '#fff',
          }"
          class="left-btn flex-c-c-c"
        >
          <div class="btn-img">
            <buttonIcon />
          </div>
          <span>查看全部</span>
        </div>
      </div>
      <div class="preface-right" @click="clickPath" style="">
        <t-image
          class="preface-right-img"
          :src="$filters.getLinkUrl(props.info.value, '?imageView2/2/w/810/h/382/format/webp')"
          alt=""
          v-if="props.info.value"
        />
        <!-- <t-image
          class="preface-right-img"
          src="http://101.34.143.36:8890/api/image/387939155165253/h_382,w_810"
          alt=""
          v-else
        /> -->
        <UnitImageNull v-else></UnitImageNull>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { pathList, pathListLoop } from '../route';
import { ref } from 'vue';
import titles from '@/wap/wapPage/wapComponents/title/title.vue';
import buttonIcon from '@/wap/wapPage/wapComponents/title/buttonIcon.vue';
import { useProjectStore } from '@/store';
import { urls } from '@/utils/request/upload';
import { useRouter, useRoute } from 'vue-router';
import UnitImageNull from '@/components/unitImageNull/unitImageNull.vue';
const props = defineProps({
  info: {
    type: Object,
  },
});
const htmlContent = ref('');
if (props.info.remarks) {
  let arr = props.info.remarks.split('\n');
  arr.forEach((el) => {
    if (el) {
      htmlContent.value =
        htmlContent.value +
        `<span>
${el}
</span>`;
    }
  });
}
const store = useProjectStore();
const router = useRouter();
const route = useRoute();
const clickPath = () => {
  store.setchildModel(props.info);
  store.setCurrent(0);
  // console.log(props.info);

  router.push({
    name: route.meta.loopType ? pathListLoop[8] : pathList[8],
    query: { childId: props.info.id },
  });
};
</script>

<style lang="less" scoped>
@import './index.less';

.preface-box {
  width: 100%;
  min-width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.preface-content {
  display: flex;
  width: 100%;
  padding-left: 130px;
  margin-top: 50px;
}
.preface-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 448px;
  margin-right: 52px;
  .left-title {
    text-align: left;
    text-indent: 2em;
    width: 100%;
    font-size: 16px;
    line-height: 28px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden; //溢出内容隐藏
    text-overflow: ellipsis; //文本溢出部分用省略号表示
    display: -webkit-box; //特别显示模式
    -webkit-line-clamp: 5; //行数
    line-clamp: 5;
    -webkit-box-orient: vertical; //盒子中内容竖直排列
  }
}
.title {
  margin-bottom: 32px;
}
.preface-right {
  display: flex;
  justify-content: right;
  margin-left: 52px;
  flex: 1;
  .preface-right-img {
    width: 100%;
    height: 382px;
    // max-width: 810px;
  }
}
.hw-wrap-spases {
  display: flex;
  flex-direction: column;
  :deep(span) {
    display: flex;
    text-indent: 2em;
  }
}
</style>
